<template>
  <cell-wrapper
    v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
    :key="wrapperType"
    :wrapper-type="wrapperType"
  >
    <!-- 进度条 -->
    <span class="full-width" v-if="!editState">
      <a-progress
        :stroke-color="contentStyle.strokeColor"
        :type="contentStyle.processType"
        :stroke-width="storeWidth"
        :class="contentClass"
        :trailColor="contentStyle?.strokeBgColor"
        :percent="percentNum"
      >
        <template #format="percent">
          <span :style="getTextStyle" :title="formatText(percent)">{{ formatText(percent) }}</span>
        </template>
      </a-progress>
    </span>
    <a-slider v-else v-model:value="progressValue" class="full-width" />
  </cell-wrapper>
</template>

<script>
  import { computed, defineComponent, ref, watch } from 'vue';
  import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
  import { cloneDeep, generateContentStyle, judgeCellEditable } from '@/utils/index';

  export default defineComponent({
    name: 'ProgressTableCell',
    components: {
      CellWrapper,
    },
    inheritAttrs: false,
    props: {
      // 当前单元格的值
      value: {
        type: [Number, String, Boolean, Object],
        default: () => {
          return null;
        },
      },
      // 单元格的默认样式
      defaultStyle: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 单元格的条件样式配置
      conditionStyle: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 当前行的数据
      rowData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
      conditionValueMap: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前列的配置
      columnsConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前单元格是否处于编辑状态
      isEdit: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const defaultValue = 0;
      const oneHundred = 100;
      const sizeTypeNum = {
        big: 15,
        centre: 10,
        small: 5,
      };
      const progressValue = computed({
          set(newValue) {
              emit('change', newValue);
          },
          get() {
              return props.value
          }
      });
      const editState = computed(() => {
        return (
          props.isEdit &&
          judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
        );
      });
      const formatText = (text) => {
        if (contentStyle.value.showText) {
          // 老数据兼容
          const num =
            contentStyle.value.precision && typeof text === 'number'
              ? text.toFixed(contentStyle.value.precision)
              : text;
          return num + (contentStyle.value.unit || '');
        }
        return '';
      };
      const getTextStyle = computed(() => {
        return contentStyle.value.textColor ? { color: contentStyle.value.textColor } : {};
      });
      const percentNum = computed(() => {
        if (isNaN(parseFloat(progressValue.value))) {
          return defaultValue.value;
        } else {
          return Math.min(progressValue.value, oneHundred);
        }
      });

      const contentClass = computed(() => {
        return contentStyle.value.processType === 'line' && contentStyle.value.textSite === 'center'
          ? 'label_center'
          : 'label_right';
      });

      const contentStyle = computed(() => {
        return generateContentStyle(
          props.columnsConfig.contentConfig,
          props.rowData,
          props.conditionValueMap,
        );
      });

      // 进度条尺寸大小
      const storeWidth = computed(() => {
        return sizeTypeNum[contentStyle.value?.sizeType];
      });
      return {
        editState,
        percentNum,
        storeWidth,
        progressValue,
        contentClass,
        contentStyle,
        getTextStyle,
        formatText,
      };
    },
  });
</script>

<style lang="less" scoped>
  .full-width {
    width: 100%;
  }
  .label_center {
    position: relative;
  }
  .label_center :deep(.@{ant-prefix}-progress-outer) {
    padding-right: 0px;
    margin-right: 0px;
  }
  .label_center :deep(.@{ant-prefix}-progress-text) {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    text-align: center;
    margin-top: 5px;
  }
  .label_right {
    position: relative;
  }
  .label_right :deep(.@{ant-prefix}-progress-text) {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .label_right :deep(.@{ant-prefix}-progress-outer) {
    width: 80%;
  }
</style>
